<template>
  <el-aside>
    <!--    时间组件-->
    <div class="current-time">
      <CurrentTime/>
    </div>
    <el-row class="head-ele-row">
      <el-col class="head-ele-left" :span="5" :offset="1">
        <div class="head-ele-left-item">
          <div class="head-ele-left-value">175.7 TB</div>
          <div class="head-ele-left-title">数据存储总量</div>
        </div>
      </el-col>
      <el-col class="head-ele-right" :span="5" :offset="12">
        <div class="head-ele-right-item">
          <div class="head-ele-right-value">15973</div>
          <div class="head-ele-right-title">数据作业总量</div>
        </div>
      </el-col>
    </el-row>
    <!--    轮播组件-->
    <!--    <div class="block">-->
    <!--      <el-carousel :autoplay="true" height="105px">-->
    <!--        <el-carousel-item v-for="(item,index) in allMachineData" :key="index">-->
    <!--          <MachineDetail :machine-info="item"></MachineDetail>-->
    <!--        </el-carousel-item>-->
    <!--      </el-carousel>-->
    <!--    </div>-->
    <div>
      <div>
        <div class="box-app">
          <div v-for="(item,index) in app_list"
               :style="{transform: 'rotateY(' + 360 / app_num * index + 'deg) translateZ(' + app_translateZ+ 'px)'}">
            <img v-if="item.alive === 'y'" class="img-app" :src="appCorrectImage" @click="showMachineInfo(item)" alt="">
            <img v-else class="img-app" :src="appErrorImage" @click="showMachineInfo(item)" alt="">
          </div>
        </div>
      </div>
      <div id="vertica">
        <div class="box-vertica">
          <div v-for="(item,index) in vertica_list"
               :style="{transform: 'rotateY(' + 360 / vertica_num * index + 'deg) translateZ(' + vertica_translateZ+ 'px)'}">
            <img v-if="item.alive === 'y'" class="img-vertica" :src="correctImage" @click="showMachineInfo(item)"
                 alt="">
            <img v-else class="img-vertica" :src="errorImage" @click="showMachineInfo(item)" alt="">
          </div>
        </div>
      </div>
      <div id="cdh">
        <div class="box-cdh">
          <div v-for="(item,index) in cdh_list"
               :style="{transform: 'rotateY(' + 360 / cdh_num * index + 'deg) translateZ(' + cdh_translateZ+ 'px)'}">
            <img v-if="item.alive === 'y'" class="img-vertica" :src="correctImage" @click="showMachineInfo(item)"
                 alt="">
            <img v-else class="img-vertica" :src="errorImage" @click="showMachineInfo(item)" alt="">
          </div>
        </div>
      </div>

      <!--      显示总指标情况-->
      <!--      <div class="total">-->
      <!--        <span class="t_cdh">{{cdh_num}}</span>-->
      <!--        <span class="t_app">{{app_num}}</span>-->
      <!--        <span class="t_vertica">{{vertica_num}}</span>-->
      <!--      </div>-->


      <!--      显示机器详情信息-->
      <el-dialog

              custom-class="myDiaLog"
              :title="'主机名'"
              :visible.sync="isShowMachineInfo"
              width="40%"
      >
        <div slot="title" class="header-title">
          <div class="host-title">
            <span v-if="currentMachineInfo.hostname" class="host-name">{{ currentMachineInfo.hostname }}</span>
            <span v-else class="host-name">机器信息</span>
            <span v-if="currentMachineInfo.alive === 'y'" class="host-status el-icon-success"
                  style="color: greenyellow"></span>
            <span v-else class="host-status el-icon-error" style="color: red"></span>
          </div>

        </div>

        <!--      内容主体区 v1-->
        <!--        <el-form ref="machineInfo" label-width="">-->
        <!--          <el-form-item label="状态" prop="alive">-->
        <!--            <el-tag type="danger" class="el-icon-error">离线</el-tag>-->
        <!--            <el-input v-if="currentMachineInfo.alive === 'y'" value="在线"></el-input>-->
        <!--            <el-input v-else value="离线"></el-input>-->
        <!--          </el-form-item>-->
        <!--          <el-form-item label="CPU" prop="cpu">-->
        <!--            <el-input v-model="currentMachineInfo.cpu"></el-input>-->
        <!--          </el-form-item>-->
        <!--          <el-form-item label="磁盘" prop="disk">-->
        <!--            <el-input v-model="currentMachineInfo.disk"></el-input>-->
        <!--          </el-form-item>-->
        <!--          <el-form-item label="主机" prop="hostname">-->
        <!--            <el-input v-model="currentMachineInfo.hostname"></el-input>-->
        <!--          </el-form-item>-->
        <!--          <el-form-item label="地址" prop="ip">-->
        <!--            <el-input v-model="currentMachineInfo.ip"></el-input>-->
        <!--          </el-form-item>-->
        <!--          <el-form-item label="内存" prop="memory">-->
        <!--            <el-input v-model="currentMachineInfo.memory"></el-input>-->
        <!--          </el-form-item>-->
        <!--          <el-form-item label="类型" prop="type">-->
        <!--            <el-input v-model="currentMachineInfo.type"></el-input>-->
        <!--          </el-form-item>-->
        <!--        </el-form>-->

        <!--        内容主体区 v2-->
        <el-form ref="machineInfo" label-width="">
          <!--                    <el-form-item label="状态" prop="alive">-->
          <!--                      <el-tag v-if="currentMachineInfo.alive === 'y'" type="success" class="el-icon-success">在线</el-tag>-->
          <!--                      <el-tag v-else type="danger" class="el-icon-error">离线</el-tag>-->
          <!--                    </el-form-item>-->
          <el-form-item label="地址" prop="ip">
            <span class="host-ip">{{ currentMachineInfo.ip }}</span>
            <!--            <el-input v-model="currentMachineInfo.ip"></el-input>-->
          </el-form-item>
          <el-form-item label="CPU" prop="cpu">
            <el-progress v-if="currentMachineInfo.cpu_usage < 50" status="success"
                         style="width: 300px;display: inline-block" :text-inside="true" :stroke-width="20"
                         :percentage="Number(currentMachineInfo.cpu_usage)"></el-progress>
            <el-progress v-else-if=" 50< currentMachineInfo.cpu_usage < 70" status="warning"
                         style="width: 300px;display: inline-block" :text-inside="true" :stroke-width="20"
                         :percentage="Number(currentMachineInfo.cpu_usage)"></el-progress>
            <el-progress v-else status="exception" style="width: 300px;display: inline-block" :text-inside="true"
                         :stroke-width="20" :percentage="Number(currentMachineInfo.cpu_usage)"></el-progress>
            <el-input v-model="currentMachineInfo.cpu_num + ' 核'"></el-input>
          </el-form-item>
          <el-form-item label="磁盘" prop="disk">
            <el-progress v-if="currentMachineInfo.disk_usage < 50" status="success"
                         style="width: 300px;display: inline-block" :text-inside="true" :stroke-width="20"
                         :percentage="Number(currentMachineInfo.disk_usage)"></el-progress>
            <el-progress v-else-if=" 50< currentMachineInfo.disk_usage < 70" status="warning"
                         style="width: 300px;display: inline-block" :text-inside="true" :stroke-width="20"
                         :percentage="Number(currentMachineInfo.disk_usage)"></el-progress>
            <el-progress v-else status="exception" style="width: 300px;display: inline-block" :text-inside="true"
                         :stroke-width="20" :percentage="Number(currentMachineInfo.disk_usage)"></el-progress>
            <el-input v-model="currentMachineTotalDisk"></el-input>
          </el-form-item>
          <el-form-item label="内存" prop="memory">
            <el-progress v-if="currentMachineInfo.memory_usage < 50" status="success"
                         style="width: 300px;display: inline-block" :text-inside="true" :stroke-width="20"
                         :percentage="Number(currentMachineInfo.memory_usage)"></el-progress>
            <el-progress v-else-if=" 50< currentMachineInfo.memory_usage < 70" status="warning"
                         style="width: 300px;display: inline-block" :text-inside="true" :stroke-width="20"
                         :percentage="Number(currentMachineInfo.memory_usage)"></el-progress>
            <el-progress v-else status="exception" style="width: 300px;display: inline-block" :text-inside="true"
                         :stroke-width="20" :percentage="Number(currentMachineInfo.memory_usage)"></el-progress>
            <el-input v-model="currentMachineTotalMemory"></el-input>
          </el-form-item>
          <!--          <el-form-item label="类型" prop="type">-->
          <!--            <el-tag  type="primary" >{{currentMachineInfo.type}}</el-tag>-->
          <!--          </el-form-item>-->
        </el-form>
      </el-dialog>
    </div>
    <!--    <el-row class="nums">-->
    <!--      <el-col :span="4" class="cdh-num">{{cdh_num}}</el-col>-->
    <!--      <el-col :span="4" class="app-num">{{app_num}}</el-col>-->
    <!--      <el-col :span="4" class="vertica-num">{{vertica_num}}</el-col>-->
    <!--    </el-row>-->
    <el-row class="machine-nums">
      <el-col :span="24">
        <div class="machine-cdh">
          <div class="machine-title">CDH集群 <span class="machine-num">{{ 40 }}</span></div>
<!--          <div class="machine-title">CDH集群 <span class="machine-num">{{ 40 }}</span></div>-->
        </div>
        <div class="machine-app">
          <div class="machine-num-app">{{  28 }}</div>
<!--          <div class="machine-num-app">{{ 28 }}</div>-->
          <div class="machine-title-app">APP</div>
        </div>
        <div class="machine-mpp">
          <div class="machine-title">MPP集群 <span class="machine-num">{{ 78 }}</span></div>
<!--          <div class="machine-title">MPP集群 <span class="machine-num">{{ 78 }}</span></div>-->
        </div>
      </el-col>
    </el-row>

    <el-row class="profile-machine">
      <el-carousel class="machine-carousel" :autoplay="true" :height="bannerHeight+'px'">
        <el-carousel-item v-for="(item,index) in allMachineData" :key="index" style="background: transparent">
          <el-col :span="3" :offset="3" class="profile-machine-col">
            <div class="profile-machine-col" v-if="item.alive === 'y'">
              <div class="status-machine vertical-center"
                   style=" color:#3FDCA0;background-color: #115c11;border:1px solid #3FDCA0;">正常
              </div>
              <div class="ip-machine vertical-center">{{ item.ip }}</div>
            </div>
            <div class="profile-machine-col" v-else>
              <div class="status-machine vertical-center"
                   style=" color:#f86e6e;background-color: #a70202;border:1px solid #ff9191;">异常
              </div>
              <div class="ip-machine vertical-center">{{ item.ip }}</div>
            </div>

          </el-col>
          <el-col :span="1" class="disk-machine-title vertical-center">
            磁盘
          </el-col>
          <el-col :span="3" class="disk-machine-progress">
            <!--            <el-progress :show-text="false" :percentage="50" class="machine-progress"></el-progress>-->
            <el-progress v-if="item.disk_usage < 50" status="success" :show-text="false"
                         :percentage="Number(item.disk_usage)"></el-progress>
            <el-progress v-else-if=" 50< item.disk_usage < 70" status="warning" :show-text="false"
                         :percentage="Number(item.disk_usage)"></el-progress>
            <el-progress v-else status="exception" style="width: 100px;display: inline-block" :text-inside="true"
                         :show-text="false"
                         :percentage="Number(machineInfo.disk_usage)"></el-progress>
          </el-col>
          <el-col :span="1" class="disk-machine-value vertical-center">
            {{ (item.disk_total / Math.pow(1024, 3)).toFixed(2) + 'TB' }}
          </el-col>
          <el-col :span="1" class="cpu-machine-title vertical-center">
            CPU
          </el-col>
          <el-col :span="4" class="cpu-machine-progress">
            <!--            <el-progress :show-text="false" :percentage="50" class="machine-progress"></el-progress>-->
            <el-progress v-if="item.cpu_usage < 50" status="success" :show-text="false"
                         :percentage="Number(item.cpu_usage)"></el-progress>
            <el-progress v-else-if=" 50< item.cpu_usage < 70" status="warning" :show-text="false"
                         :percentage="Number(item.cpu_usage)"></el-progress>
            <el-progress v-else status="exception" :show-text="false"
                         :stroke-width="14" :percentage="Number(item.cpu_usage)"></el-progress>
          </el-col>
          <el-col :span="1" class="cpu-machine-value vertical-center">
            {{ item.cpu_num }}核
          </el-col>
          <el-col :span="1" class="memory-machine-title vertical-center">
            内存
          </el-col>
          <el-col :span="4" class="memory-machine-progress">
            <!--            <el-progress :show-text="false" :percentage="40" class="machine-progress"></el-progress>-->
            <el-progress v-if="item.memory_usage < 50" status="success" :show-text="false"
                         :percentage="Number(item.memory_usage)"></el-progress>
            <el-progress v-else-if=" 50< item.memory_usage < 70" status="warning" :show-text="false"
                         :percentage="Number(item.memory_usage)"></el-progress>
            <el-progress v-else status="exception" style="width: 100px;display: inline-block" :text-inside="true"
                         :show-text="false"
                         :percentage="Number(item.cpu_usage)"></el-progress>
          </el-col>
          <el-col :span="1" class="memory-machine-value vertical-center">
            {{ (item.memory_total / Math.pow(1024, 2)).toFixed(0) + 'GB' }}
          </el-col>
        </el-carousel-item>
      </el-carousel>
    </el-row>
  </el-aside>
</template>

<script>
  import "@/assets/lib/jquery-1.8.0.js"
  // import "@/assets/js/build_ele.js"
  import $ from 'jquery'
  import CurrentTime from "../currentTime/CurrentTime";
  import staticData from "../../assets/data/data";
  import MachineDetail from "./MachineDetail";

  export default {
    name: "machine",
    created() {
      this.getMachineInfo()
    },
    mounted() {
      this.setSize();
      const that = this;
      window.addEventListener('resize', function () {
        that.carouselRight = $(".profile-machine").height();
        that.bannerHeight = 1 * that.carouselRight
        that.setSize();
      })

    },
    data() {
      return {
        // 轮播高度
        bannerHeight: "",

        // 总数据
        allMachineData: [],
        // app
        app_num: 0,
        app_list: [],
        app_translateZ: 23,
        // vertica
        vertica_num: 0,
        vertica_list: [],
        vertica_translateZ: 33,
        // cdh
        cdh_num: 0, // 节点个数
        cdh_list: [49], //
        cdh_translateZ: 44.5, // z轴到中信建距离
        // app图片
        appCorrectImage: require('../../assets/img/v-host-green.png'),
        appErrorImage: require('../../assets/img/v-host-red.png'),
        // vertica cdh 图片
        correctImage: require('../../assets/img/host-green.png'),
        errorImage: require('../../assets/img/host-red.png'),
        // 是否显示机器详情信息
        isShowMachineInfo: false,
        currentMachineInfo: {},
        currentMachineTotalMemory: '',
        currentMachineTotalDisk: '',
        // 定时获取数据
        timer: ''

      }
    },
    components: {
      // MachineDetail,
      CurrentTime
    },
    methods: {
      setSize: function () {
        // 重置底部轮播高度
        this.bannerHeight = 1 * $(".profile-machine").height();

        // 重置轮盘 z
        let htmlWidth = $("html").width()
        this.app_translateZ = htmlWidth / 8.347 - 5
        this.vertica_translateZ = htmlWidth / 5.818
        this.cdh_translateZ = htmlWidth / 4.316 + 10

      },
      async getMachineInfo() {
        let res
        // let {data: staticData} = await this.$http.get('http://localhost:80/data/machine_info.json')
        try {
          let {data: data} = await this.$http.get('big_screen/portal_screen/machine_info/')
          res = data
        } catch (e) {
          res = staticData
          console.log(e);
        }
        if (res.code !== 200) {
          res = staticData
          // return this.$message.error('获取服务器信息失败！')
        }// 各类型节点数量
        this.app_num = res.data.app.length
        this.vertica_num = res.data.vertica.length
        this.cdh_num = res.data.cdh.length

        // 各类型对象数组
        this.app_list = res.data.app
        this.vertica_list = res.data.vertica
        this.cdh_list = res.data.cdh

        // 所有数据
        this.allMachineData = this.app_list.concat(this.vertica_list).concat(this.cdh_list)
        // console.log(this.allMachineData);

      },
      // 显示app机器信息
      showMachineInfo(item) {
        this.isShowMachineInfo = true
        this.currentMachineInfo = item
        this.currentMachineTotalMemory = this.currentMachineInfo.memory_total / Math.pow(1024, 2)
        this.currentMachineTotalMemory = this.currentMachineTotalMemory.toFixed(0) + 'GB'
        this.currentMachineTotalDisk = this.currentMachineInfo.disk_total / Math.pow(1024, 3)
        this.currentMachineTotalDisk = this.currentMachineTotalDisk.toFixed(2) + 'TB'
        console.log(this.currentMachineTotalDisk);
        console.log(this.currentMachineTotalMemory);
      },
      sumItem(arr1, arr2) {
        if (arr2.length == 0) {
          return arr1;
        } else {
          arr1.map(function (value, index) {
            arr2[index] += value;
          })
        }
        return arr2;
      },
    },

  }
</script>

<style scoped>
  /*顶部两指标*/
  .head-ele-row {
    position: absolute;
    top: 11% !important;
    width: 50%;
    height: 10rem;
  }

  .head-ele-left, .head-ele-right {
    height: 10rem;
    text-align: center;
    position: relative;

  }

  .head-ele-left {
    background-image: url("../../assets/img/b-img/machine-head-left.png");
    background-size: 100%, 100%;
    background-repeat: no-repeat;
    position: relative;
  }

  .head-ele-right {
    background-image: url("../../assets/img/b-img/machine-head-right.png");
    background-size: 100%, 100%;
    background-repeat: no-repeat;
    position: relative;

  }

  .head-ele-left-item {
    width: 80%;
    position: relative;
    left: 24%;
    top: 10%;
  }

  .head-ele-right-item {
    width: 80%;
    position: relative;
    right: 4%;
    top: 10%;
  }

  .head-ele-left-title, .head-ele-right-title {
    font-size: 0.9vw;
    /*width: 100%;*/
    background: linear-gradient(to top, #00ccff, #ffffff);
    -webkit-background-clip: text;
    color: transparent;
    margin-top: -3px;
  }


  .head-ele-left-value, .head-ele-right-value {
    font-size: 1.5vw;
    width: 100%;
    color: #3BCDDD;
  }


  /*底部指标*/
  .el-row {
    top: 74%;
    color: #ffffff;
    font: normal bold 30px arial, sans-serif;
  }

  .machine-nums {
    height: 12%;
    position: relative;
    top: 80%;
  }

  .machine-cdh, .machine-mpp {
    height: 40%;
    width: 20%;
  }


  .machine-cdh {
    position: absolute;
    bottom: 3%;
    left: 21%;
  }

  .machine-title {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1vw;
  }


  .machine-num {
    font-size: 1.8vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 5px;
    color: #3BCDDD;
  }

  .machine-mpp {
    position: absolute;
    bottom: 3%;
    left: 58%;
  }


  .machine-app {
    height: 70%;
    width: 15%;
    position: absolute;
    left: 42.2%;
    top: 22%;
  }

  .machine-title-app {
    font-size: 1.3vw;
  }

  .machine-num-app {
    font-size: 1.6vw;
    color: #3BCDDD;
  }

  /*底部详情轮播*/
  .machine-carousel {
    position: relative;
    top: 81.5%;
  }

  .profile-machine {
    height: 6%;
    position: relative;
    top: 75.6%;
  }

  .profile-machine-col {
    height: 100%;
    text-align: left;
  }

  .vertical-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .status-machine {
    height: 40%;
    width: 4%;
    position: absolute;
    top: 30%;
    left: 11.8%;
    font-size: 0.2vw;
    text-align: center;
  }

  .ip-machine {
    height: 80%;
    width: 11%;
    position: absolute;
    font-size: 0.9vw;
    top: 10%;
    left: 18%;
  }

  .disk-machine-title {
    position: absolute;
    left: 31.5%;
    height: 100%;
    font-size: 0.7vw;
  }

  .disk-machine-value {
    position: absolute;
    left: 44%;
    height: 100%;
    font-size: 0.7vw;
  }

  .cpu-machine-value {
    position: absolute;
    left: 63.5%;
    height: 100%;
    font-size: 0.7vw;
  }

  .memory-machine-value {
    position: absolute;
    left: 82%;
    height: 100%;
    font-size: 0.7vw;
  }


  .disk-machine-progress {
    position: absolute;
    left: 36%;
    top: 43%;
    width: 7%;
  }

  .cpu-machine-title {
    position: absolute;
    left: 50.5%;
    height: 100%;
    font-size: 0.7vw;
  }

  .cpu-machine-progress {
    position: absolute;
    left: 55.5%;
    top: 43%;
    width: 7%;
  }

  .memory-machine-title {
    position: absolute;
    left: 69%;
    height: 100%;
    font-size: 0.7vw;
  }

  .memory-machine-progress {
    position: absolute;
    left: 73.5%;
    top: 43%;
    width: 7%;
  }

</style>
<style>
  /*机器部分布局 样式*/
  .el-aside {
    width: 50% !important;
    height: 100% !important;
  }

  /*总数样式*/
  .total {
    position: fixed;
    bottom: 7%;
    left: 17.5%;
  }

  .total span {
    color: #fff;
    font: normal bold 30px arial, sans-serif;

  }

  .t_cdh {
    position: relative;
    left: -10%;
    /*margin-left: -7px;*/
  }

  .t_vertica {
    position: relative;
    left: 138%;
    /*margin-left: 72px;*/
  }

  .t_app {
    position: relative;
    left: 65%;
    /*margin-left: 72px;*/
  }

  /*机器详情样式*/
  .el-dialog {
    height: 410px !important;
    color: #69ca62;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(170, 204, 238, 0.8)), to(rgba(0, 193, 222, 0.3))) !important;
  }

  .el-dialog, .el-dialog::before, .el-dialog::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .el-dialog::before, .el-dialog::after {
    content: '';
    z-index: -1;
    margin: -2%;
    box-shadow: inset 0 0 0 2px;
    animation: clipMe 8s linear infinite;
  }

  .el-dialog::before {
    animation-delay: -4s;
  }

  .el-dialog__body {
    padding: 70px 20px !important;
  }

  @keyframes clipMe {
    0%, 100% {
      clip: rect(0px, 798.0px, 2px, 0px);
    }
    25% {
      clip: rect(0px, 2px, 448.0px, 0px);
    }
    50% {
      clip: rect(428.0px, 798.0px, 448.0px, 0px);
    }
    75% {
      clip: rect(0px, 798.0px, 448.0px, 798.0px);
    }
  }

  .el-input {
    width: 100px !important;

    background-color: transparent !important;
  }

  .el-input__inner {
    background-color: transparent !important;
    border: 0px !important;
    color: #ffffff !important;
  }

  .el-form-item__label {
    color: #ffffff !important;
  }

  .header-title {
    color: #ffffff !important;
    font: normal bold 20px arial, sans-serif;
  }

  .el-form-item {
    padding-left: 15%;
  }

  .el-tag {
    width: 60px;
    font: normal bold 10px arial, sans-serif;
  }

  .host-ip {
    position: absolute;
    left: 40%;
    font-size: initial;
    color: #fff;
  }

  .header-title {
    position: relative;
  }

  .host-title {
    position: absolute;
    left: 45%;
  }

  /*时间*/
  .current-time {
    position: absolute;
    top: 4%;
    left: 0.5%;
    color: #ffffff;
    font-size: 0.75vw;
  }

  /*轮播样式*/
  .block {
    width: 200px;
    border-radius: 30px !important;
    position: relative;
    top: 10%;
    left: 2%;
  }

  /*.el-carousel {*/
  /*  background: transparent;*/
  /*}*/
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(170, 204, 238, 0.8)), to(rgba(0, 193, 222, 0.3)));
  }

  .el-carousel__indicators {
    display: none;
  }

</style>
